.box1{
    width: 200px;
    height: 50px;
    background: #ddd linear-gradient(#000,#000) no-repeat 0/0%;
    animation: box1 2s linear infinite;
}
@keyframes box1{
    100%{
        background-size: 100%;
    }
}
.box2{
    width: 200px;
    height: 50px;
    background: linear-gradient(to right,pink,skyblue) 0/0% no-repeat;
    border-radius: 20px;
    border: 2px solid gray;
    animation: box2 2s infinite linear;
}
@keyframes box2{
    100%{
        background-size: 100%;
    }
}
.box3{
    width: 200px;
    height: 50px;
    border-radius: 20px;
    background: repeating-linear-gradient(45deg,red 0 10px,orange 0 20px) 0/0% no-repeat,repeating-linear-gradient(45deg,rgb(208, 206, 206) 0 10px,gray 0px 20px) 0/100%;
    animation: box3 2s infinite linear;
}
@keyframes box3{
    100%{
        background-size: 100%;
    }
}
.box4{
    width: 116px;
    height: 50px;
    background: repeating-linear-gradient(to right,#000 0 15px,#fff 0 20px) 0/0% no-repeat,repeating-linear-gradient(to right,#dbdbdb 0 15px,#fff 0 20px) 0/100%;
    animation: box4 3s steps(7) infinite;
}
@keyframes box4{
    100%{
        background-size: 120%;
    }
}